"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Camera, ImageIcon, Video, MapPin, Hash, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { BottomNavigation } from "@/components/bottom-navigation"
import { useAuth } from "@/lib/auth"

export default function CreatePage() {
  const [content, setContent] = useState("")
  const [hashtags, setHashtags] = useState<string[]>([])
  const [currentHashtag, setCurrentHashtag] = useState("")
  const [location, setLocation] = useState("")
  const [selectedMedia, setSelectedMedia] = useState<string[]>([])
  const { user } = useAuth()
  const router = useRouter()

  const handleAddHashtag = () => {
    if (currentHashtag.trim() && !hashtags.includes(currentHashtag.trim())) {
      setHashtags([...hashtags, currentHashtag.trim()])
      setCurrentHashtag("")
    }
  }

  const handleRemoveHashtag = (tagToRemove: string) => {
    setHashtags(hashtags.filter((tag) => tag !== tagToRemove))
  }

  const handleMediaUpload = (type: "image" | "video") => {
    // Mock media upload
    const mockUrl = `/placeholder.svg?height=200&width=300&text=${type}`
    setSelectedMedia([...selectedMedia, mockUrl])
  }

  const handleRemoveMedia = (indexToRemove: number) => {
    setSelectedMedia(selectedMedia.filter((_, index) => index !== indexToRemove))
  }

  const handlePost = () => {
    if (!content.trim()) return

    // Mock post creation
    console.log("Creating post:", {
      content,
      hashtags,
      location,
      media: selectedMedia,
    })

    // Reset form
    setContent("")
    setHashtags([])
    setLocation("")
    setSelectedMedia([])

    // Navigate back to home
    router.push("/")
  }

  if (!user) return null

  return (
    <div className="min-h-screen bg-gray-50 pb-20">
      {/* Header */}
      <div className="bg-white border-b border-gray-200 sticky top-0 z-40">
        <div className="max-w-md mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            {/*<Button variant="ghost" onClick={() => router.back()}>*/}
            {/*  Cancel*/}
            {/*</Button>*/}
            <h1 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Create Post</h1>
            <Button onClick={handlePost} disabled={!content.trim()} size="sm">
              Post
            </Button>
          </div>
        </div>
      </div>

      <div className="max-w-md mx-auto px-4 py-4">
        <Card>
          <CardHeader>
            <div className="flex items-center space-x-3">
              <Avatar className="h-10 w-10">
                <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.displayName} />
                <AvatarFallback>{user.displayName.charAt(0)}</AvatarFallback>
              </Avatar>
              <div>
                <h3 className="font-semibold">{user.displayName}</h3>
                <p className="text-sm text-gray-500">@{user.username}</p>
              </div>
            </div>
          </CardHeader>

          <CardContent className="space-y-4">
            {/* Content Input */}
            <Textarea
              placeholder="What's on your mind?"
              value={content}
              onChange={(e) => setContent(e.target.value)}
              rows={4}
              className="resize-none border-0 p-0 text-lg placeholder:text-gray-400 focus-visible:ring-0"
            />

            {/* Media Preview */}
            {selectedMedia.length > 0 && (
              <div className="grid grid-cols-2 gap-2">
                {selectedMedia.map((media, index) => (
                  <div key={index} className="relative">
                    <img
                      src={media || "/placeholder.svg"}
                      alt={`Upload ${index + 1}`}
                      className="w-full h-32 object-cover rounded-lg"
                    />
                    <Button
                      variant="destructive"
                      size="sm"
                      className="absolute top-2 right-2 h-6 w-6 p-0"
                      onClick={() => handleRemoveMedia(index)}
                    >
                      <X size={12} />
                    </Button>
                  </div>
                ))}
              </div>
            )}

            {/* Hashtags */}
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <Hash size={16} className="text-gray-400" />
                <input
                  type="text"
                  placeholder="Add hashtag"
                  value={currentHashtag}
                  onChange={(e) => setCurrentHashtag(e.target.value)}
                  onKeyPress={(e) => e.key === "Enter" && handleAddHashtag()}
                  className="flex-1 border-0 outline-none text-sm"
                />
                <Button size="sm" onClick={handleAddHashtag}>
                  Add
                </Button>
              </div>

              {hashtags.length > 0 && (
                <div className="flex flex-wrap gap-2">
                  {hashtags.map((tag) => (
                    <Badge key={tag} variant="secondary" className="flex items-center space-x-1">
                      <span>#{tag}</span>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-4 w-4 p-0 hover:bg-transparent"
                        onClick={() => handleRemoveHashtag(tag)}
                      >
                        <X size={10} />
                      </Button>
                    </Badge>
                  ))}
                </div>
              )}
            </div>

            {/* Location */}
            <div className="flex items-center space-x-2">
              <MapPin size={16} className="text-gray-400" />
              <input
                type="text"
                placeholder="Add location"
                value={location}
                onChange={(e) => setLocation(e.target.value)}
                className="flex-1 border-0 outline-none text-sm"
              />
            </div>

            {/* Media Upload Options */}
            <div className="flex items-center justify-around pt-4 border-t border-gray-100">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleMediaUpload("image")}
                className="flex flex-col items-center space-y-1"
              >
                <ImageIcon size={20} />
                <span className="text-xs">Photo</span>
              </Button>

              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleMediaUpload("video")}
                className="flex flex-col items-center space-y-1"
              >
                <Video size={20} />
                <span className="text-xs">Video</span>
              </Button>

              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleMediaUpload("image")}
                className="flex flex-col items-center space-y-1"
              >
                <Camera size={20} />
                <span className="text-xs">Camera</span>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

      <BottomNavigation />
    </div>
  )
}
